<template>
  <div class="recommend-main">
    <div class="layout">
      <nav class="sub-navbar">  <!-- 子导航栏 -->
        <router-link to="/recommend" class="nav-link link1" exact-active-class="active">推荐题目</router-link>
        <router-link to="/recommend/history" class="nav-link link2" exact-active-class="active">提交历史</router-link>
        <router-link to="/recommend/submit-tag" class="nav-link link3" exact-active-class="active">提交标签修改</router-link>
        <router-link to="/recommend/tag-dependency" class="nav-link link4" exact-active-class="active">提交依赖关系</router-link>
    </nav>
      <div class="sub-view">  <!-- 子视图 -->
    <router-view />
  </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommendMain",
};
</script>

<style scoped>
.recommend-main {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.layout {
  width: 100%;
  display: flex;
}

.sub-navbar {
  display: flex;
  width: 140px;
  flex-direction: column;
  background-color: transparent;
  margin-top: 20px;
}

.nav-link {
  color: #fff;
  opacity: 0.8;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 4px 0 0 4px;
  margin-bottom: 10px;
  margin-left: 20px;
  transition: all 0.3s ease;
}

.link1 {
  background-color: #ff6347;
}

.link2 {
  background-color: #4682b4;
}

.link3 {
  background-color: #32cd32;
}

.link4 {
  background-color: #ffa500;
}

.link5 {
  background-color: #c81fe5;
}

.nav-link:last-child {
  margin-bottom: 0;
}

.nav-link:hover,
.active {
  opacity: 1;
  margin-left: 0px;
}

.link1.router-link-active {
  background-color: #c73b3a;
}

.link2.router-link-active {
  background-color: #365e80;
}

.link3.router-link-active {
  background-color: #28a745;
}

.link4.router-link-active {
  background-color: #e69500;
}

.link5 {
  background-color: #c81fe5;
}

.sub-view {
  background-color: #f8f1e7;
  min-height: 80vh;
  padding: 20px;
  border-radius: 8px;
  margin-top: 10px;
  flex: 1;
  margin-left: 0;
  border: 2px solid #8b4513;
}
</style>